<template>
  <div class="container">
    <!--    @mouseenter="showDialog"
            @mouseleave="hideDialog"-->
    <el-button
        type="primary"
        @click="showDialog"
        @contextmenu="goToLink">
      关于
    </el-button>
    <el-dialog
        style="  border-radius: 20px;"
        title="软件信息"
        v-model="dialogVisible"
        width="50%"
        center
        transition="slide-in-left">
      <!-- 引用自定义的动画名称 -->

      <el-text class="mx-1" type="primary">作者：望望 20级</el-text>
      <br>
      <el-text class="mx-1" type="warning">版本号：1.0.0</el-text>
      <br>
      <el-text class="mx-1" type="success">源代码链接:
        <el-link @click="goToLink" type="danger">https://gitee.com/gittecloudywang/facultysalary.git</el-link>
        <br>
        <el-text type="info">(右键关于按钮跳转该链接)</el-text>
      </el-text>
    </el-dialog>
  </div>
</template>

<script>



export default {
  data() {
    return {
      dialogVisible: false, // 弹出框是否可见
      link: "https://gitee.com/gittecloudywang/facultysalary.git", // 跳转的链接
      // mouseOnButton: false, // 鼠标是否在按钮上
    };
  },
  methods: {
    showDialog() {
      // 显示弹出框的方法
      // console.log('ru')
      this.dialogVisible = true;
      // this.mouseOnButton = true; // 设置鼠标在按钮上的标志为真
    },
    hideDialog() {

    },
    goToLink() {
      // 跳转到指定链接的方法
      window.open(this.link);
    },
  },
  mounted() {


  },
};
</script>

<style>
/* 自定义一个弹出框从左侧滑入的动画 */
@keyframes slide-in-left {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

</style>
